<template lang="html">
  <div class="wrapper">
    <canvas ref="canvas" style="margin: 0 auto; display:block;"></canvas>
  </div>
</template>

<script>
export default {
  methods: {
    init () {
      const canvas = this.$refs.canvas,
        innerWidth = window.innerWidth,
        innerHeight = window.innerHeight

      if (canvas.getContext) {
        const ctx = canvas.getContext('2d')

        canvas.width = innerWidth
        canvas.height = innerHeight

        const mouse = {
          x: innerWidth / 2,
          y: innerHeight / 2 - 80
        }

        // const colors = [
        //   '#00bdff',
        // 	'#4d39ce',
        // 	'#088eff',
        // ]
        const colors = [
          '#A5DEE5',
          '#E0F9B5',
          '#FEFDCA',
          '#FFCFDF'
        ]

        window.addEventListener('mousemove', event => {
          mouse.x = event.clientX
          mouse.y = event.clientY
        })

        window.addEventListener('resize', () => {
          canvas.width = innerWidth
          canvas.height = innerHeight
          init()
        })

        function randomIntFromRange (min, max) {
          return Math.floor(Math.random() * (max - min + 1) + min)
        }

        function randomColor (colors) {
          return colors[Math.floor(Math.random() * colors.length)]
        }

        function Particle (x, y, radius, color) {
          const distance = randomIntFromRange(50, 120)
          this.x = x
          this.y = y
          this.radius = radius
          this.color = color
          this.radians = Math.random() * Math.PI * 2
          this.velocity = 0.05
          this.distanceFromCenter = {
            x: distance,
            y: distance
          }
          this.prevDistanceFromCenter = {
            x: distance,
            y: distance
          }
          this.lastMouse = {
            x: x,
            y: y
          }

          this.update = () => {
            const lastPoint = {
              x: this.x,
              y: this.y
            }
            this.radians += this.velocity

            // Drag effect
            this.lastMouse.x += (mouse.x - this.lastMouse.x) * 0.05
            this.lastMouse.y += (mouse.y - this.lastMouse.y) * 0.05

            // Circular Motion
            this.distanceFromCenter.x = this.prevDistanceFromCenter.x + Math.sin(this.radians) * 100
            this.distanceFromCenter.y = this.prevDistanceFromCenter.x + Math.sin(this.radians) * 100

            this.x = this.lastMouse.x + Math.cos(this.radians) * this.distanceFromCenter.x
            this.y = this.lastMouse.y + Math.sin(this.radians) * this.distanceFromCenter.y

            this.draw(lastPoint)
          }

          this.draw = lastPoint => {
            ctx.beginPath()
            ctx.strokeStyle = this.color
            ctx.lineWidth = this.radius
            ctx.moveTo(lastPoint.x, lastPoint.y)
            ctx.lineTo(this.x, this.y)
            ctx.stroke()
            ctx.closePath()
          }
        }

        let particles

        function init () {
          particles = []
          for (let i = 0, len = 50; i < len; i++) {
            const radius = (Math.random() * 2) + 1
            particles.push(new Particle(canvas.width / 2, canvas.height / 2, radius, randomColor(colors)))
          }
        }

        function animate () {
          requestAnimationFrame(animate)
          ctx.fillStyle = 'rgba(255, 255, 255, 0.05)'
          ctx.fillRect(0, 0, canvas.width, canvas.height)
          particles.forEach(particle => {
            particle.update()
          })
        }

        init()
        animate()
      }
    },
  },
  mounted () {
    this.init()
  }
}
</script>

<style lang="scss" scoped>

</style>
